<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<!-- element 自定义 css -->
		<link rel="stylesheet" href="../css/element.css" />
		<!-- public 自定义 css -->
		<link rel="stylesheet" href="../css/public.css" />

		<!-- 头部css -->
		<link rel="stylesheet" href="../common/css/header.css" />
		
		<!-- 本页面的css -->
		<link rel="stylesheet" href="css/home.css" />

	</head>

	<body>
		<!-- 头部嵌入 -->
		<script type="text/javascript" src="../common/header.js"></script>
		<!-- 导航 嵌入 -->
		<script type="text/javascript" src="../common/nav.js"></script>
		<div class="homePage-wrapper section home" v-cloak>
			<div class="homePage-content-wrapper">
				<el-row style="margin-left: -10px !important;margin-right: -10px !important;" :gutter="20">
					<el-col :sm="7">
						<div class="personInfo-moudule moudule">
							<div class="personInfo fboxRow">
								<i class="personInfo-logo  "></i>
								<ul class="personInfo-form">
									<li class="from-approve  fboxRow mb-10">
										<span class="from-approve-text mr-10">
											{{userInfo.isRealName ? userInfo.username : '未实名认证' }}
										</span>
										<div @click="gotoApprove " v-if="!userInfo.isRealName" class="yzButton">
											去认证
										</div>
										<div v-else class="yzButton  alradsuceess">
											已认证
										</div>
									</li>
									<li class="from-item mb-20">
										{{(userInfo.phone !== undefined  && userInfo.phone !== null)? userInfo.phone : userInfo.email}}
									</li>
									<li class="from-item mb-20 font12">
										{{userInfo.id}}
									</li>
									<li class="from-item" style="align-items: center;">
										<img v-if="userInfo.phone === undefined || userInfo.phone === null" class="iconImg" src="img/mobile-default.png" />
										<img  v-if="userInfo.phone !== undefined && userInfo.phone !== null" class="iconImg" src="img/mobile-select.png" />
										<img style="width: 17px;" v-if="userInfo.email === undefined || userInfo.email === null" class="iconImg" src="img/mailbox-default.png" />
										<img style="width: 17px;" v-if="userInfo.email !== undefined && userInfo.email !== null" class="iconImg" src="img/mailbox-select.png" />
										<img style="width: 17px;" v-if="!userInfo.isRealName" class="iconImg" src="img/identityCard-default.png" />
										<img  style="width: 17px;" v-if="userInfo.isRealName" class="iconImg" src="img/identityCard-select.png" />

									</li>
								</ul>
							</div>
							<span class="desc">
								亲爱的 {{userInfo.isRealName ? userInfo.username : userInfo.id}} 欢迎回来！
							</span>
						</div>
					</el-col>
					<el-col :sm="11">
						<div class="form-wrapper">
							<span class="from-title">账户概览</span>
							<div class="form-content-wrapper firstRow">
								<div style="padding-top: 5px;">
									<el-row class="w100" style="margin-left: -10px !important;margin-right: -10px !important;" gutter="20">
										<el-col :span="12">
											<div class="content-item fboxRow" style="padding-left: 20px;">
												<i class="linear"></i>
												<img class="imgicon" src="img/balance.png" />
												<div class="content-price-wrapper fboxCol">
													<span class="title mb-20">账户余额</span>
													<p class="price"><span class="unit">¥ </span><span class="num">{{handleAccountpriceInt()}}</span><span style="font-weight: bold;"
														 class="point">.{{handleAccountpricePoint()}}</span>
												</div>

											</div>
										</el-col>
										<el-col :span="12">
											<div class="content-item fboxRow" style="padding-left: 20px;">
												<img class="imgicon" src="img/coupon.png" />
												<div class="content-price-wrapper fboxCol">
													<span class="title mb-20">可用优惠券</span>
													<p class="price ticketPrice"><span class="unit">¥ </span><span class="num">{{handleTickpriceInt()}}</span><span style="font-weight: bold;"
														 class="point">.{{handleTickpricePoint()}}</span><span class="point  font16" style="font-size: 16px;">/{{accountInfo.ticketNum}}张</span>
												</div>

											</div>
										</el-col>
									</el-row>
								</div>

								<span @click="gotopriceCenter" class="yzButton lightToDeep">费用中心</span>
							</div>
						</div>
					</el-col>
					<el-col :sm="6">
						<div class="form-wrapper">
							<span class="from-title">代办事项</span>
							<div class="form-content-wrapper" style="padding-top: 0px;">
								<div  class="content-item wait fboxRow" v-for="(item,index) in accountSurveyGroup" :key="index">
									<p><span style="color: #6462F3;">{{item.num}}</span>个{{item.label}}</p>
									<span @click="gotoHandleLink(item)" class="gotolink">{{handleButtonText(item)}}>></span>
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
				<el-row style="margin-left: -10px !important;margin-right: -10px !important;margin-top: 20px;" :gutter="20">
					<el-col :span="7">
						<div class="form-wrapper">
							<div class="from-title-wrapper">
								<span class="from-title">专属客服<span class="desc font14">（QQ扫码打开）</span></span>
							</div>
							
							<div class="form-content-wrapper QQ-wrapper fboxCol">
								<div class="fboxRow">
									<div class="QQcodeImg">
										<div class="QQcodeImg-inner"></div>
									</div>
									<div class="content-wrapper">
										<p class="qq-txt">qq扫码添加您的专属客服，随时随地在线沟通</p>
										<div class="zixun-wrapper fboxCol">
											<span style="font-size: 12px;" class="mb-10">24小时售后电话：400-227-0515</span>
											<div class="yzButton zixunButton">在线咨询</div>
										</div>
									</div>
								</div>
								

							</div>
						</div>
						<div class="form-wrapper news-wrapper mt-20" >
							<div class="from-title-wrapper">
								<span class="from-title">新闻公告</span>
								<span @click="gotonews" class="link">查看更多>></span>
							</div>
							<div class="form-content-wrapper fboxCol" style="padding-top: 0px;">
								<div @click="gotonewsDetail(item)" v-for="(item,index) in newsGroup"  :key="index" class="content-item fboxRow">
									<span class="time">【2021-12-03】</span>
									<p class="text">衡天科技网站最新版本上线，更多优惠...</p>
								</div>
						
							</div>
						</div>
					</el-col>
					<el-col :span="17">
						<div class="form-wrapper" style="padding-top: 26px;padding-bottom: 25px;">
							<div class="from-title-wrapper">
								<span class="from-title">我的产品</span>
							</div>
							
							<div class="form-content-wrapper product-wrapper">
								<el-row  style="margin-left: -10px !important;margin-right: -10px !important;" :gutter="20">
									<el-col v-for="(item,index) in productGroup" :span="8">
										<div class="product-wrapper-item">
											<img class="logoImg" :src="handleProductLogo(item)" />
											<div class="item-content">
												<p class="title">{{item.label}}</p>
												<p class="desc">{{item.desc}}</p>
												<div class="button-wrapper fboxRow">
													<div @click="gotoServerDetail(item,'all')" class="button-item fboxCenter">
														所有：<span class="num">{{item.allNum}}</span>
													</div>
													<div  @click="gotoServerDetail(item,'renew')" class="button-item fboxCenter ml-10">
														续费：<span class="num">{{item.renewNum}}</span>
													</div>
												</div>
											</div>
										</div>
									</el-col>

								</el-row>
						
							</div>
						</div>
					</el-col>
				</el-row>

			</div>

		</div>

		<script src="../js/util.js"></script>
		<!-- vue  -->
		<script>
			let vmHome = new Vue({
				el: '.homePage-wrapper',
				data: function() {
					return {
						// 用户个人信息
						userInfo: {
							id:'JG2345645',
							isRealName:false,  // 是否实名
							username: '宇智波鼬',
							email:'1025535910@qq.com',
							phone: undefined
							
						},
						accountInfo: {
							accountprice: 1003.33,// 账户余额
							ticketPrice: 3500.5, // 优惠券总值
							ticketNum:12
						},
						
						
						
						accountSurveyGroup: [{
							value: 'waitRenew',
							num: 20,
							label: '待续费产品'
						}, {
							value: 'noComplete',
							num: 10,
							label: '未完成订单'
						}, {
							value: 'noHandle',
							num: 10,
							label: '未处理工单'
						}],
						newsGroup:undefined,// 新闻列表只截取前五个
							
						productGroup:[{
							label:'云服务器',
							type:'yun',
							desc:'云服务器测试文案',
							allNum:30, // 所有
							renewNum:5, // 续费
						},{
							label:'轻量云服务器',
							type:'lightyun',
							desc:'轻量云服务器测试文案',
							allNum:22, // 所有
							renewNum:6, // 续费
						},{
							label:'物理服务器',
							type:'geneal',
							desc:'物理服务器测试文案xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
							allNum:30, // 所有
							renewNum:5, // 续费
						},{
							label:'虚拟主机',
							type:'virtual',
							desc:'虚拟主机测试文案',
							allNum:30, // 所有
							renewNum:5, // 续费
						},{
							label:'域名',
							type:'domainName',
							desc:'域名测试文案啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦阿拉啦啦啦啦拉拉阿拉啦啦啦啦阿拉啦',
							allNum:30, // 所有
							renewNum:5, // 续费
						}]
						
					}
				},
				methods: {
					// 跳转到新闻资讯页
					gotonews:function() {
						console.log(' 跳转到新闻资讯页')
					},
					
					// 跳转到费用中心
					gotopriceCenter: _throttle(function() {
						console.log('点击费用中心')
					}),
					// 处理账户余额 整数位
					handleTickpriceInt: function() {
						return parseInt(this.accountInfo.ticketPrice) 
					},
					// 处理账户余额 小数位
					handleTickpricePoint: function() {
						let num = this.accountInfo.ticketPrice * 100 % 100
					
						if(num === 0) {
							num = '00'
						}else if(num < 10) {
							num =  'num' + '0' 
						}
						return  num
					},
					// 处理账户余额 整数位
					handleAccountpriceInt: function() {
						return parseInt(this.accountInfo.accountprice) 
					},
					// 处理账户余额 小数位
					handleAccountpricePoint: function() {
						let num = this.accountInfo.accountprice * 100 % 100

						if(num === 0) {
							num = '00'
						}else if(num < 10) {
							num =  'num' + '0' 
						}
						return  num
					},
						
					
					// 去认证
					gotoApprove: _throttle(function() {
						console.log('点击去认证')
					}),
					// 处理产品logo
					handleProductLogo:function(item) {
						let imgUrl = ''
						switch (item.type){
							case 'yun':
								imgUrl = 'yun'
								break;
							case 'lightyun':
								imgUrl = 'lightyun'
								break;
							case 'geneal':
								imgUrl = 'Independent'
								break;
							case 'virtual':
								imgUrl = 'virtual-host'
								break;
							case 'domainName':
								// 域名暂时没有
								imgUrl = 'domainName'
								break;
								
							default:
							imgUrl = 'yun'
								break;
						}
						
						
						return 'img/' + imgUrl + '.png'
					},
					// 产品点击事件
					gotoServerDetail:function(item,type) {
						if(type === 'all') {
							console.log('全部',item.label)
						}else if(type === 'renew') {
							console.log('续费',item.label)
						}
					},
					// 处理按钮的文字
					handleButtonText: function(item) {
						switch (item.value) {
							case 'waitRenew':
								return '前往续费';
							case 'noComplete':
								return '前往支付';
							case 'noHandle':
								return '前往处理';
							default:
								break;
						}
					},
					// 代办跳转
					gotoHandleLink: function(item) {
						switch (item.value) {
							case 'waitRenew':
								// return '前往续费';
								console.log('前往续费')
								break;
							case 'noComplete':
								// return '前往支付';
								console.log('前往支付')
								break;
							case 'noHandle':
								// return '前往处理';
								console.log('前往处理')
								break;
							default:
								break;
						}
					},
					// 跳转到新闻详情
					gotonewsDetail:_throttle(function(item) {
						console.log('新闻详情')
						console.log(item)
					})
				},
				mounted: function() {
					// 模拟新闻列表截取前五条
					let allnewsGroup = [{},{},{},{},{},{},{},{},{},{}]
					this.newsGroup = allnewsGroup.filter(function(item,index) {
						return index < 3
					})
				}

			})
		</script>
	</body>
</html>
